<template>
  <div class="wrapper">
    <ul>
      <router-link tag="li" :to="'/list/' + item.id " class="item" v-for="item of list" :key="item.id">
        <div class="item-left"><img :src="item.imgUrl"></div>
        <div class="item-right">
          <h2>{{item.title}}</h2>
          <p class="subtitle">{{item.subtitle}}</p>
          <p class="spot">
            <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
          </p>
          <p class="price">
            <span>{{item.PriceArea.price}}</span>
            <span class="priceFont">{{item.PriceArea.unit}}</span>
            <span class="model">{{item.PriceArea.area}}</span>
          </p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'SecondaryList',
    data () {
      return {
        list: [{
          id: '0001',
          imgUrl: 'http://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/fa6e3c39d914438fa593f36706fc8359.jpg?x-oss-process=image/resize,w_250',
          title: '金沙世纪花园三房出售',
          subtitle: '所属小区：天域花园',
          BrightSpot: [{x: '房本在手'}, {x: '随时看房'}, {x: '满五唯一'}],
          PriceArea: {
            price: '13700',
            unit: '元/平',
            area: '80-127㎡ | 2-4房',
          }
        }, {
          id: '0002',
          imgUrl: 'http://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/fa6e3c39d914438fa593f36706fc8359.jpg?x-oss-process=image/resize,w_250',
          title: '金山湖珑湖湾豪宅，标准四房，精装、拎包入住精装',
          subtitle: '所属小区：天域花园',
          BrightSpot: [{x: '电梯'}, {x: '满五唯一'}, {x: '地铁口'}],
          PriceArea: {
            price: '13700',
            unit: '元/平',
            area: '80-127㎡ | 2-4房',
          }
        }
        ]
      }
    },
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"

  .wrapper
    wrapper()

  .title
    title()

  .item
    width 100%
    box-sizing border-box
    border-bottom: .026667rem solid #f8f7f7
    display: flex
    align-items center
    padding: .2rem
    margin-bottom: .3rem
    background: #fff
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, .04)
    border-radius: .1rem

  .item-left
    width: 2rem
    height: 1.8rem
    position: relative

  .item-left img
    border-radius .05rem
    width: 100%
    height: 100%

  .subtitle
    color black
    margin-top .1rem

  .item-right
    flex: 1
    text-align: left
    padding-left: .346667rem
    position: relative

  .item-right
    color #ccc
    font-size 0.012rem

  .item-right h2
    font-size .3rem
    font-weight bolder
    color black
    margin-bottom .1rem
    overflowEllipsis2()


  .item-right .Strict
    box-sizing border-box
    background #504f5e
    color #f1ddb5
    padding 0.04rem 0.08rem
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .item-right .sale
    box-sizing border-box
    background white
    color #a3c512
    padding 0.04rem 0.08rem
    border 0.02rem solid #a3c512
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .item-right .discontinued
    box-sizing border-box
    background white
    color #979ea8
    padding 0.04rem 0.08rem
    border 0.02rem solid #979ea8
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .item-right-subtitle
    padding-top .12rem


  .spot
    margin-top .2rem

  .item-right .price
    margin-top .2rem
    font-size .3rem

  .spot span
    background #f3f5f8
    color #9ba6aa
    margin-right .1rem
    padding .05rem .1rem
    border-radius .1rem

  .price span
    color #ff9100
    font-weight 800

  .price .model
    color #798089
    font-size .1rem
    font-weight 100

  .price .priceFont
    font-size .2rem


  .item-more
    button()

</style>

